diff options
author | Ilion Beyst <ilion.beyst@gmail.com> | 2022-10-31 20:31:03 +0100 |
---|---|---|
committer | Ilion Beyst <ilion.beyst@gmail.com> | 2022-10-31 20:31:03 +0100 |
commit | 06a8ed945b4c517bb6cf5c84f0d06aa9ede37f11 (patch) | |
tree | 38cf7445bc01a42437f1329d74652865debc86ea /web/pw-server/src/routes/bots/[bot_name]/__layout.svelte | |
parent | 8d556bbff1bd716c2c42c8002706038f28b55b91 (diff) | |
download | planetwars.dev-06a8ed945b4c517bb6cf5c84f0d06aa9ede37f11.tar.xz planetwars.dev-06a8ed945b4c517bb6cf5c84f0d06aa9ede37f11.zip |
tabbed bot page
Diffstat (limited to 'web/pw-server/src/routes/bots/[bot_name]/__layout.svelte')
-rw-r--r-- | web/pw-server/src/routes/bots/[bot_name]/__layout.svelte | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte new file mode 100644 index 0000000..baa8f99 --- /dev/null +++ b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte @@ -0,0 +1,87 @@ +<script lang="ts" context="module"> + import { ApiClient } from "$lib/api_client"; + + export async function load({ params, fetch }) { + const apiClient = new ApiClient(fetch); + const botName = params["bot_name"]; + const { bot, owner } = await apiClient.get(`/api/bots/${botName}`); + + return { + props: { + bot, + owner, + }, + }; + } +</script> + +<script lang="ts"> + export let bot; + export let owner; +</script> + +<div class="header"> + <div class="header-title-line"> + <h1 class="bot-name">{bot["name"]}</h1> + {#if owner} + <span class="title-line-owner"> + by + <a class="owner-name" href="/users/{owner['username']}"> + {owner["username"]} + </a> + </span> + {/if} + </div> + <div class="bot-tabs"> + <a class="bot-tab" href={`/bots/${bot.name}`}>index</a> + <a class="bot-tab" href={`/bots/${bot.name}/matches`}>matches</a> + <a class="bot-tab" href={`/bots/${bot.name}/stats`}>stats</a> + </div> +</div> +<slot /> + +<style lang="scss"> + .header { + padding: 0 16px; + border-bottom: 1px solid black; + } + + .header-title-line { + display: flex; + align-items: baseline; + } + + .title-line-owner { + padding: 0 16px; + color: #333; + } + + $header-space-above-line: 12px; + + .bot-name { + font-size: 24pt; + margin-bottom: $header-space-above-line; + } + + .owner-name { + font-size: 14pt; + // font-weight: 600; + text-decoration: none; + color: black; + margin-bottom: $header-space-above-line; + } + + .bot-tabs { + display: flex; + } + + .bot-tab { + padding: 8px; + text-decoration: none; + color: black; + } + + .bot-tab:hover { + background-color: rgb(246, 248, 250); + } +</style> |